<template>
	<view class="container">
		<PageTitle title="首页"></PageTitle>
		
		<view class="introduce-wrapper" v-for="(item, index) in moduleIntroList" :key="item.homeId">
			<view class="cover-wrapper">
				<image class="introduce-cover" :src="item.homeImage | formatFile"></image>
			</view>
			<view class="introduce-content">
				<view :style="{maxHeight: item.height, overflow: item.overflow}">
					<u-parse :content="item.homeContent" @ready="parseReady($event, index)"></u-parse>
				</view>
				
				<view class="unfold-btn" v-if="item.show && item.fold && item.isLoad" @tap="unfold(index)">
					<text>展开</text>
					<image src="../../static/images/icon-more.png" class="icon-more" mode=""></image>
				</view>
				
				<view class="unfold-btn" v-if="item.show && !item.fold && item.isLoad" @tap="fold(index)">
					<text>折叠</text>
					<image src="../../static/images/icon-more.png" class="icon-more reserve" mode=""></image>
				</view>
			</view>
		</view>
		
		<!-- Q&A -->
		<view class="qa-list">
			<view class="qa-item flex-x-bet-y-center" v-for="(item, index) in qaList" :key="item.qaId"  @tap="navTo('/pages/other/richText?from=qa&qaId=' + item.qaId)">
				<text>{{item.qaTitle}}</text>
				<image src="../../static/images/icon-open.png" mode="" class="icon-open"></image>
			</view>
			
		</view>


		<my-modal ref="modal"></my-modal>

	</view>
</template>

<script>
	// 未展开的最大高度，单位px
	const maxHeight = '115px'
	import { getHomeModule, getQa } from '@/api/common.js'
	export default {
		data() {
			return {
				menuButtonInfo: null,
				moduleIntroList:[],
				qaList: []
			}
		},
		onLoad() {
			this.menuButtonInfo = this.menuButton;
			this.getHomeModule()
			this.getQa()
		},
		methods: {
			getHomeModule(){
				getHomeModule().then(res => {
					res.data.forEach(item => {
						item.show = false	// 显示展开、折叠按钮
						item.isLoad = false 	// 是否加载完成
						item.fold = false 	// 折叠
						item.height = maxHeight // 高度
						item.overflow = 'hidden' // 溢出处理
					})
					this.moduleIntroList = res.data
				})
			},
			getQa(){
				getQa({pageSize: 999}).then(res => {
					this.qaList = res.rows
				})
			},
			// 富文本加载完成
			parseReady(rect, i){
				const moduleOne = this.moduleIntroList[i]
				// 显示展开
				if (rect.height > parseFloat(maxHeight)) {
					moduleOne.show = true
					moduleOne.fold = true
				}
				moduleOne.isLoad = true
			},
			// 点击展开
			unfold(index)  {
				const moduleOne = this.moduleIntroList[index]
				moduleOne.fold = false
				moduleOne.height = "auto"
				moduleOne.overflow = "visible"
			},
			// 点击折叠
			fold(index, item) {
				const moduleOne = this.moduleIntroList[index]
				moduleOne.fold = true
				moduleOne.height = maxHeight
				moduleOne.overflow = "hidden"
			}
		}
	}
</script>

<style lang="scss">
	.container{
		padding-bottom: 30rpx;
	}
	
	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #000000;
	}

	.cover-wrapper {
		padding: 30rpx;

		.introduce-cover {
			height: 230rpx;
			box-sizing: border-box;
			width: 100%;
		}
	}

	.introduce-content {
		box-sizing: content-box;
		padding: 30rpx 30rpx;
		box-shadow: 0px 6rpx 35rpx 0px rgba(0, 0, 0, 0.1);
		border-radius: 26rpx;
		margin: 0 30rpx;
	}

	.unfold-btn {
		margin: 40rpx auto 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 168rpx;
		height: 54rpx;
		font-size: 28rpx;
		color: #808080;
		background: #F6F6F6;
		border-radius: 27rpx;

		.icon-more {
			width: 44rpx;
			height: 44rpx;
			margin-left: 5rpx;
		}

		.reserve {
			transform: rotate(180deg);
		}
	}
	
	.qa-list {
		padding-top: 1rpx;
		margin: 30rpx;
		background-color: #fff;
		border-radius: 26rpx;
		box-shadow: 0px 6rpx 35rpx 0px rgba(0,0,0,0.1);
		overflow: hidden;
	
		.qa-item {
			height: 100rpx;
			background: #FFFFFF;
			padding: 0 30rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
			background: #FFFFFF;
			border-bottom: 1rpx solid #F3F3F3;
			
			.kefu{
				color: $theme-color;
			}
		}
		
		.icon-open{
			width: 46rpx;
			height: 46rpx;
		}
	}
</style>